import Taro, { Component } from '@tarojs/taro'
import { View, Text, Input } from '@tarojs/components'
import { AtButton, AtInput } from 'taro-ui'
import { DNavBar } from '@/components'
import http from '@/api'
import './myphone.scss'
import { handlePhone } from '@/utils'
import { validPhone } from '@/utils/validate'

export default class MyPhone extends Component {
    state = {
        title: '手机号',
        telphone: '',
        status: false,
        active: 1, // 1：手机号 2：修改手机号码 3：验证手机
        newMobile: '',
        time: 60, // 倒计时
        isGoing: false, // 是否开启定时器
        timeId: '', // 定时器id
        label: '发送验证码',
        code: '', // 验证码
    }

    componentDidMount() {
        this.setState({
            telphone: this.$router.params.telphone
        })
    }

    changeMobile = (event) => {
        this.setState({
            newMobile: event.detail.value
        })
    }

    onClickLeftIcon = () => {
        let { active } = this.state
        active--
        this.setState({
            active,
            title: this.getTitle(active),
            status: active === 1 ? false : true
        })

    }

    getTitle(status) {
        return {
            $1: '手机号',
            $2: '修改手机号码',
            $3: '验证手机'
        }[`$${status}`]
    }

    toEditMobile = () => {
        this.setState({
            active: 2,
            status: true,
            title: '修改手机号码'
        })
    }

    toVerift = () => {
        const { newMobile } = this.state
        if (!newMobile) {
            Taro.showToast({
                title: '手机号不能为空',
                icon: 'none'
            })
            return
        }
        if (!validPhone(newMobile)) {
            Taro.showToast({
                title: '手机号格式错误',
                icon: 'none'
            })
            return
        }
        this.setState({
            active: 3,
            status: true,
            title: '验证手机',
        })
        this.getNumberCode()
    }

    // 发送验证码
    getNumberCode() {
        let { time, isGoing, timeId, newMobile } = this.state
        if (isGoing) {
            return
        } else {
            time--
            this.setState({
                isGoing: true,
                label: `${time}秒后可重发`
            })

            // 发送验证码
            http.getUserCode({
                mobile: newMobile,
                // type: '3'
                type: '2'
            }).then(res => {
                Taro.showToast({
                    title: '验证码发送成功',
                    icon: 'none'
                })
            })

            timeId = setInterval(() => {
                time--
                if (time === -1) { // 倒计时结束
                    // 清除定时器
                    clearInterval(timeId)
                    // 文本重置
                    this.setState({
                        time: 60,
                        label: '重新获取',
                        isGoing: false
                    })
                    return
                }
                this.setState({
                    time: 10,
                    label: `${time}秒后可重发`
                })
            }, 1000)
        }
    }

    changeCode(newVal) {
        this.setState({
            code: newVal
        })
    }

    setMobile() {
        const { newMobile, code } = this.state

        if (!code) {
            Taro.showToast({
                title: '验证码不能为空',
                icon: 'none'
            })
            return
        }
        http.setUserPhone({ phone: newMobile, code }).then(res => {
            Taro.showToast({
                title: '已修改手机',
                duration: 800,
                mask: true
            }).then(() => {
                setTimeout(() => {
                    Taro.navigateBack({
                        delta: 1
                    })
                }, 1000)
            })
        })
    }


    render() {
        const { title, telphone, status, active, newMobile, label, code } = this.state

        return (
            <View className="b_myphone">
                <DNavBar status={status} title={title} onClickLeftIcon={this.onClickLeftIcon}></DNavBar>
                {
                    active === 1 && <View>
                        <View className="top_contain">
                            <View className="phone_contain">
                                <View>当前绑定手机号码</View>
                                <View className="phone">{handlePhone(telphone)}</View>
                            </View>
                        </View>
                        <View className="btn_contain">
                            <AtButton className="btn" onClick={this.toEditMobile}>修改手机号</AtButton>
                            <AtButton className="btn" onClick={() => { Taro.navigateBack() }}>返回</AtButton>
                        </View>
                    </View>
                }
                {
                    active === 2 && <View>
                        {/* <AtInput title='+86' type='phone' value={newMobile} onChange={this.changeMobile} placeholder='请输入手机号码' /> */}
                        <View className="newphone_contain">
                            <Text>+86</Text>
                            <Input type="number" value={newMobile} onInput={this.changeMobile} maxlength={11} placeholder='请输入新的手机号码'></Input>
                        </View>
                        <View className="btn_contain">
                            <AtButton className='btn' onClick={this.toVerift}>下一步</AtButton>
                        </View>
                    </View>
                }
                {
                    active === 3 && <View>
                        <View className="top_contain">
                            <View className="phone_contain">
                                <View className="text">我们已经发送了校验码到您的手机：</View>
                                <View className="phone">{handlePhone(newMobile)}</View>
                            </View>
                        </View>

                        <View className="verift">
                            <AtInput title="校验码" placeholder="请输入验证码" value={code} onChange={this.changeCode.bind(this)}>
                                <View onClick={this.getNumberCode.bind(this)}>{label}</View>
                            </AtInput>
                        </View>

                        <View className="btn_contain">
                            <AtButton className='btn' onClick={this.setMobile.bind(this)}>下一步</AtButton>
                        </View>
                    </View>
                }
            </View>
        )
    }
}
